<template>
    <div class="xlh-test">
        <p>本页面功能：为互联网版本配置课程体系。</p>
        上传后，程序操作为‘先删除之 前配置的所有课程体系，再将用户上传的excel内容进行读取录入’。为了保证数据的正确性，请先<span @click="download">下载</span>最新的课程体系，再录入<span class="upload"><input id="input-file" type="file" multiple="multiple" auto-complete="off" @change="getFile"></input>上传</span>。
    </div>
</template>

<script>
    export default {
        data() {
            return {

            }
        },
        methods: {
            download() {
                let self = this
                self.$http.post('/tes/course/direction/download/permission').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.downloadAxios(res.data)
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            downloadAxios(token) {
                let self = this
                let downloadElement = document.createElement('a');
                downloadElement.style.display = 'none';
                downloadElement.href = '/tes/course/direction/download?token='+token
                // downloadElement.download = fileName; //下载后文件名
                document.body.appendChild(downloadElement);
                downloadElement.click(); //点击下载
                document.body.removeChild(downloadElement); //下载完成移除元素
            },
            // 上传文件
            getFile($event) {
                let self = this
                let fileType = $event.target.files[0].name
                    fileType = fileType.substring((fileType.lastIndexOf('.') + 1), fileType.length)
                if(fileType.toLowerCase() != 'xls' && fileType.toLowerCase() != "xlsx"){
                    self.$message.error('请上传xls 或 xlsx格式的文件!')
                    return
                }
                let fd = new FormData()
                    fd.append('file', $event.target.files[0])
                const loading = this.$loading({
                    lock: true,
                    text: '正在上传中',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                })
                self.$http.post('/tes/course/model/import-direction',fd, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        loading.close()
                        self.$message({
                            message: '上传成功',
                            type: 'success'
                        })
                        $('#input-file').val('')
                    }else{
                        $('#input-file').val('')
                        loading.close()
                        self.$message.error(res.message)
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .xlh-test{
        padding: 20px;
        font-size: 16px;
        p{
            margin-bottom: 20px;
        }
        span{
            color: #1277eb;
            padding: 0 5px;
            cursor: pointer;
        }
        .upload{
            position: relative;
            overflow: hidden;
            input{
                position: absolute;
                width: 100%;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                opacity: 0;
                cursor: pointer;
            }
        }
    }
</style>
